<% include header %>
<link rel="stylesheet" href="/css/personal.css">
<link rel="stylesheet" href="/css/selfArticle.css">
<% if(!session.user){ %>
<link rel="stylesheet" href="/css/login.css">
    <% } %>
<% include nav %>
<% if(!session.user){ %>
   
    <% include login %>
<% } %>
<div class="container person">
        <div class="head padmar">
            <img src="/images/<%= userInfo.avator %>" alt="" class="img-circle imgs"/>
            <div class="user-title">
                <h3><%= userInfo.name %></h3>
                <p class="job"><span class="glyphicon glyphicon-hdd"></span> <%= userInfo.job %></p>
                <p class="introduce"><span class="glyphicon glyphicon-hand-right"></span> <%= userInfo.introdu %></p>
            </div>
            <div class="title-right">
                <ul>
                    <li class="selfs"><a href="<%= userInfo.github %>" title="github"><span class="glyphicon glyphicon-globe"></span></a></li>
                    <li class="selfs"><a href="<%= userInfo.userhome %>" title="个人主页"><span class="glyphicon glyphicon-home"></span></a></li>
                </ul>
            <% if(session&&session.user===userInfo.name){ %>
                <p class="edit">
                    <!--     <a href=""><button class="btn article">写文章</button></a>   -->
                         <a href="/personalInfo?user=<%= userInfo.name %>"><button class="btn info">编辑个人资料</button></a>
                     </p>
            <% }else{ %>
                <p class="edit">
                    <!--     <a href=""><button class="btn article">写文章</button></a>   -->
                         <a href="/personalInfo?user=<%= userInfo.name %>"><button class="btn info">查看个人资料</button></a>
                     </p>
            <% } %>
            </div>
        </div>
 
        <div class="information">
            <ul>
                <li  class="acitves"><a href="javascript:getData('/selfArticle/<%= userInfo.id %>')">文章<span class="num"><%= userArr[0] %></span></a></li>
                <li><a href="javascript:getData('/collections/<%= userInfo.id %>')">收藏<span class="num"><%= userArr[1] %></span></a></li>
                <!-- <li><a href="">标签<span class="num">5</span></a></li>
                <li><a href="">提出问题<span class="num">5</span></a></li>
                <li><a href="">解答问题<span class="num">5</span></a></li> -->
                <li><a href="javascript:getData('/follows/<%= userInfo.id %>')">关注<span class="num"><%= userArr[2] %></span></a></li>
                <li><a href="javascript:getData('/followers/<%= userInfo.id %>')">粉丝<span class="num"><%= userArr[3] %></span></a></li>
            </ul>
        </div>
 
        <div class="main">
            <div class="news ">
                       
                <div class="nothing">
                        <p><span class="glyphicon glyphicon-list-alt"></span></p>
                        <p>这里什么都没有</p>
                </div>
                   
            </div>
        </div>  
    </div>
    <script src="/js/ajax.js"></script>
    <script>
        getData('/selfArticle/<%= userInfo.id %>');
        function getData(url){
            ajax('get',url,null);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                    let news = document.getElementsByClassName('news')[0];
                    if(xhr.responseText!='0'){                     
                        news.innerHTML = xhr.responseText;
                    }else{
                        news.innerHTML = '<div class="nothing">'+
                                            '<p><span class="glyphicon glyphicon-list-alt"></span></p>' +
                                            '<p>这里什么都没有</p>' +
                                         '</div>'
                    }
                }
            }
        }

        // //关注按钮
        // let follow = document.getElementsByClassName('fw')[0];
        // follow.addEventListener('click',function(e){
        //     e.stopPropagation()
        //     e.cancelBubble = true;
        //     let target = e.target||e.srcElement;
        //     if(target.nodeName=='BUTTON'){
        //         let userId = parseInt(target.dataset);
        //         console.log(userId)
        //         if(target.innerHTML==='关注作者'){
        //             ajax('get','/follow/' + userId + '?flag=1',null);
        //             xhr.onreadystatechange = function () {
        //          if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
        //             console.log(xhr.responseText)
        //              if(xhr.responseText){
        //                 target.innerHTML = '已关注';
        //                  console.log('ok')
        //              }
        //          }
        //      }
        //         }else{
        //             ajax('get','/follow/' + userId + '?flag=2',null);
        //             xhr.onreadystatechange = function () {
        //          if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
        //              console.log(xhr.responseText)
        //              if(xhr.responseText){
        //                 target.innerHTML = '关注作者'
        //                  console.log('ok2')
        //              }
        //          }
        //      }
        //         }
        //     }
            
        // },false);
        function addfollow(e) { 
            window.event? window.event.cancelBubble = true : e.stopPropagation();
           // e.cancelBubble = true;
            let target = e.target||e.srcElement;
            if(target.nodeName=='BUTTON'){
                let userId = parseInt(target.dataset.id);
                if('<%= session.id %>'){
                    if(target.innerHTML==='关注作者'){
                    ajax('get','/follow/' + userId + '?flag=1',null);
                    xhr.onreadystatechange = function () {
                 if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                    console.log(xhr.responseText)
                     if(xhr.responseText){
                        target.innerHTML = '已关注';
                         console.log('ok')
                     }
                 }
             }
                }else{
                    ajax('get','/follow/' + userId + '?flag=2',null);
                    xhr.onreadystatechange = function () {
                 if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                     console.log(xhr.responseText)
                     if(xhr.responseText){
                        target.innerHTML = '关注作者'
                         console.log('ok2')
                     }
                 }
             }
                } 
                }else{
                    alert('请先登录！')
                }
             
            }
            
         }
          
    </script>
</body>
</html>
